<template>
<div>
    <div class="banner" @click="handleBannerClick">
        <img class="banner-img" :src="bannerImg">
        <div class="banner-info">
            <div class="banner-title">{{this.sightName}}</div>
            <div class="banner-number">
                <span class="fa fa-photo"></span>
               {{this.bannerImgs.length}}
            </div>
        </div>
    </div>
     <common-gallary :imgs="bannerImgs" v-show="showGallary" @close="handleGallaryClick"></common-gallary>
</div>
</template>

<script>
import CommonGallary from 'common/gallary/Gallary'
export default {
    name:'DetailBanner',
    props: {
        sightName:String,
        bannerImg:String,        
        bannerImgs:Array
    },
    data () {
        return {
            showGallary:false
        }
    },
    methods: {
      handleBannerClick(){
          this.showGallary=true
      },
      handleGallaryClick(){
          this.showGallary=false
      }  
    },
    components: {
        CommonGallary
    }
   

}
</script>

<style lang="stylus" scoped>
.banner{
    overflow hidden
    position relative
    height 0
    padding-bottom 55%
}
.banner-img{
   width: 100%;
    min-height: 4rem;
}
 .banner-info{
     display flex
     position absolute
     left 0
     right 0
     bottom 0.3rem
     line-height 0.6rem
     color #fff
     z-index 10
 }
 .banner-title{
     flex 1
     font-size 0.35rem
     padding 0 .2rem
 }
 .banner-number{
    padding: 0 0.2rem;
    height: 0.32rem;
    line-height: 0.355rem;
    border-radius: 0.2rem;
    font-size: 0.2rem;
    background: rgba(0,0,0,0.5);
    margin-right: 0.2rem;
    margin-top: 0.15rem;
 }
</style>
